<template>
    <div class="home-recommond">
        <h3>推荐歌单</h3>
        <div class="wrapper" ref="wrapper">
            <ul class="content" ref="content">
                <li v-for="(item,index) in listData" :key="index"
                @click="selectItem(item)">
                    <div class="cover">
                        <van-image :src="item.cover" radius="1rem"/>
                        <span>{{item.listen_num | numFilter(1)}}万</span>
                    </div>
                    <span>{{item.title}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import BScroll from "better-scroll";
export default{
    data(){
        return{
            listData:[]
        }
    },
    created(){
        this.getListData();
    },
    methods:{
        //获取到推荐歌单的数据
        getListData(){
            this.$request("get",'/recommend/playlist/u')
            .then(res=>{
                console.log(res);
                if(res.result == 100){
                    this.listData = res.data.list;
                }
                // console.log(this.listData);
                this.betterScrollHorizontal(this.listData.length,10);//调用横向滚动的方法
            })
        },
        //列表项的单击事件
        selectItem(item){
            const id=item.content_id;
            this.$router.push({
                name:"singlist",
                params: {id:id}
            })
            //通过path手动建立url
            this.$router.push({path:`/singlist/${id}`})
        },
        betterScrollHorizontal(num,itemWidth){
            this.$refs.content.style.width = num * itemWidth + "rem";
            this.$nextTick(() => {
                this.scroll = new BScroll(this.$refs.wrapper, {
                    startX:0,//横向滚动的开始位置
                    scrollX:true,//横向滚动
                    scrollY:false//关闭纵向滚动
                    });
                });
        },
    },
    filters:{
        //处理播放量显示格式
        numFilter(value,num){
            //把小数位固定为1位
            return parseFloat(value/10000).toFixed(num)
        }
    }
};
</script>

<style scoped>
/* .wapper{
    width: 100%;
    overflow: hidden;
}
.home-recommond ul{
    display: flex;
    flex-wrap: wrap;
    width: calc(10rem * 12);
}
 .home-recommond ul>li{
     width: 200px;
     width: calc((100% - 1rem) / 3 * 1);
    width: 10rem;
    display: inline-block;
 }
  .home-recommond ul>li:nth-of-type(3n+2){
      margin-right: 0.5rem;
      margin-left: 0.5rem;
  }
 .cover{
     position: relative;
 }
 .van-image>img {
      width: 90%;
      border-radius: 1rem;
  }
 .cover>span{
     position: absolute;
     right: 0;
     bottom: 0.2rem;
     background-color: rgb(212, 230, 136);
 } */
 .cover>span{
     position: absolute;
     right: 0.2rem;
     bottom: 0.4rem;
     background-color: rgb(212, 230, 136);
     color: white;
     font-size: 14px;
     border-radius: 1rem;
     width: 5rem;
     display: inline-block;
 }
 .cover{
     position: relative;
 }
 .wrapper{
     width: 100%;
     overflow: hidden;
 }
 /* .content{
     width: calc(12 * 10rem);
 } */
 ul.content li{
     display: inline-block;
     width: 10rem;
     vertical-align: top;
 }
 ul.content li * {
     margin: 0.1rem;
 }
 ul.content li>span{
     font-size: 0.8rem;
     color: #54493b;
 }

</style>

